import React from "react";
import { StepsPropsType, directionProps } from "./PropsType";
import classnames from "classnames";
import Icon from "../Icon";
import "./index.less";
export { directionProps, statusProps } from "./PropsType";
export type { status } from "./PropsType";

function Steps(props: StepsPropsType) {
  const cls = classnames("m-react-steps");
  const {
    type = "normal",
    current = 0,
    style = { color: "#1296db" },
    stepsList = [],
    status = "normal",
  } = props;
  const length = stepsList.length || 0;
  const renderType = () => {
    switch (type) {
      case directionProps.normal:
        return (
          <div className="steps-list">
            {length > 0 &&
              stepsList.map((item, index) => {
                let itemURL: JSX.Element | React.ReactNode | null = null;
                if (item.mainNode === false) {
                  itemURL = <div className="default-icon"></div>;
                } else if (item.status === "error") {
                  <Icon
                    iconName="iconcuo"
                    size="m"
                    style={{ color: "#f93e52" }}
                  ></Icon>;
                } else {
                  if (!!item?.icon) {
                    itemURL = item.icon;
                  } else {
                    if (index > current) {
                      itemURL = (
                        <Icon
                          iconName="icondui"
                          size="m"
                          style={{ color: "#cdcdcd" }}
                        ></Icon>
                      );
                    } else {
                      itemURL = (
                        <Icon
                          iconName="icondui"
                          size="m"
                          className={`${status}-icon`}
                        ></Icon>
                      );
                    }
                  }
                }
                return (
                  <div className="step-item" key={index}>
                    <div className="step-item-top">
                      {index !== 0 ? (
                        <div
                          className={`line ${
                            current >= index ? `${status}` : "normal"
                          }`}
                        ></div>
                      ) : (
                        <div className="line-no"></div>
                      )}
                      {itemURL}
                      {index !== length - 1 ? (
                        <div
                          className={`line ${
                            current >= index ? `${status}` : "normal"
                          }`}
                        ></div>
                      ) : (
                        <div className="line-no"></div>
                      )}
                    </div>
                    <div className="text">{item.title}</div>
                  </div>
                );
              })}
          </div>
        );
      case directionProps.vertical:
        return (
          <div className="steps-list-vertical">
            {length > 0 &&
              stepsList.map((item, index) => {
                let itemURL: JSX.Element | React.ReactNode | null = null;
                if (item.mainNode === false) {
                  itemURL = <div className="default-icon"></div>;
                } else if (item.status === "error") {
                  itemURL = (
                    <Icon
                      iconName="iconcuo"
                      size="m"
                      style={{ color: "#f93e52" }}
                    ></Icon>
                  );
                } else {
                  if (!!item?.icon) {
                    itemURL = item.icon;
                  } else {
                    if (index > current) {
                      itemURL = (
                        <Icon
                          iconName="icondui"
                          size="m"
                          style={{ color: "#cdcdcd" }}
                        ></Icon>
                      );
                    } else {
                      itemURL = (
                        <Icon
                          iconName="icondui"
                          size="m"
                          className={`${status}-icon`}
                        ></Icon>
                      );
                    }
                  }
                }
                return (
                  <div className="step-item" key={index}>
                    <div className="step-item-top">
                      {index !== 0 ? (
                        <div
                          className={`line ${
                            current >= index ? `${status}` : "normal"
                          }`}
                        ></div>
                      ) : (
                        <div className="line-no"></div>
                      )}
                      {itemURL}
                      {index !== length - 1 ? (
                        <div
                          className={`line ${
                            current >= index ? `${status}` : "normal"
                          }`}
                        ></div>
                      ) : (
                        <div className="line-no"></div>
                      )}
                    </div>
                    <div className="text">{item.title}</div>
                  </div>
                );
              })}
          </div>
        );
        break;
      default:
        break;
    }
  };
  return (
    <div className={cls} style={{ ...style }}>
      {renderType()}
    </div>
  );
}
export default Steps;